<!-- 积分流水列表
 * @Descripttion: 
 * @Author: fubinbin binbin@ssc-hn.com
 * @Date: 2025-03-12
 * @LastEditors: fubinbin binbin@ssc-hn.com
 * @LastEditTime: 2025-03-12
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-form autocomplete="off" :model="searchParam">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="类型">
              <a-select v-model:value="searchParam.auditType" showSearch placeholder="请选择类型">
                <a-select-option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="状态">
              <a-select v-model:value="searchParam.auditStatus" showSearch placeholder="请选择状态">
                <a-select-option v-for="item in stateList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="积分名称">
              <a-input v-model:value="searchParam.coinName" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-row justify="end">
              <a-button @click="clear()">重置</a-button>
              <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">积分发行管理</span>
        <div>
          <a-button type="primary" style="margin-right: 12px" @click="add()">
            <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
            新建
          </a-button>
        </div>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span v-if="record.auditStatus === 0">
              <a @click="edit(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="detail(record)">查看</a>
            </span>
            <span v-if="record.auditStatus === 1">
              <a @click="detail(record)">查看</a>
            </span>
            <span v-if="record.auditStatus === 2">
              <a @click="detail(record)">查看</a>
              <span v-if="record.auditType === 1">
                <a-divider type="vertical" />
                <a @click="handleAction(record, 1)">增发</a>
                <a-divider type="vertical" />
                <a @click="handleAction(record, 2)">销毁</a>
              </span>
            </span>
            <span v-if="record.auditStatus === 3">
              <a @click="detail(record)">查看</a>
            </span>
            <span v-if="record.auditStatus === 4">
              <a @click="detail(record)">查看</a>
            </span>
          </template>
          <template v-if="column.dataIndex === 'issueCount'">
            <span v-if="record.auditType === 1">
              {{ record.integralCount }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'addCount'">
            <span v-if="record.auditType === 2">
              {{ record.integralCount }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'destroyCount'">
            <span v-if="record.auditType === 3">
              {{ record.integralCount }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'auditType'">
            <span>
              {{
                typeList
                  .filter((v) => v.value === record.auditType)
                  .map((item) => item.label)
                  .join('')
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'auditStatus'">
            <span>
              {{
                stateList
                  .filter((v) => v.value == record.auditStatus)
                  .map((item) => item.label)
                  .join('')
              }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'createTime'">
            {{ formatToDateTime(record.createTime) }}
          </template>
        </template>
      </a-table>
    </div>
    <destory v-model:visible="visible" :type="actionType" :data="actionData" @success="handleRefresh" />
  </div>
</template>

<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { onMounted, reactive, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestGetIntegralIssuerList } from '/@/api/integral/integralIssuer'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'

  import Destory from './components/destory.vue'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    auditType: null,
    coinName: '',
    auditStatus: null,
  })

  const visible = ref(false)
  const actionType = ref(1)
  const actionData = ref({})

  const typeList = ref([
    {
      value: 1,
      label: '积分发行',
    },
    {
      value: 2,
      label: '积分增发',
    },
    {
      value: 3,
      label: '积分销毁',
    },
  ])
  const stateList = ref([
    {
      value: 0,
      label: '待提交',
    },
    {
      value: 1,
      label: '待审核',
    },
    {
      value: 2,
      label: '已发行',
    },
    {
      value: 3,
      label: '驳回',
    },
    {
      value: 4,
      label: '撤销',
    },
  ])

  /** 搜索条件 */
  const formatParam = reactive({
    auditType: null,
    coinName: '',
    auditStatus: null,
  })

  const setFormat = (value) => {
    formatParam.auditType = value.auditType
    formatParam.coinName = value.coinName
    formatParam.auditStatus = value.auditStatus
  }

  watch(
    () => searchParam,
    (value) => {
      if (value) setFormat(value)
    },
    { immediate: true, deep: true },
  )

  /** 表格列配置 */
  const columns = [
    { title: '积分名称', dataIndex: 'coinName' },
    { title: '积分代号', dataIndex: 'coinSymbol' },
    { title: '类型', dataIndex: 'auditType' },
    { title: '积分类型', dataIndex: 'moduleType' },
    { title: '发行数量', dataIndex: 'issueCount' },
    { title: '增发数量', dataIndex: 'addCount' },
    { title: '销毁数量', dataIndex: 'destroyCount' },
    { title: '状态', dataIndex: 'auditStatus' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<any, any[]>(formatParam, requestGetIntegralIssuerList)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.auditType = null
    searchParam.auditStatus = null
    searchParam.coinName = ''
    setFormat(searchParam)
    search()
  }
  /**
   * 积分增发/销毁
   */
  const handleAction = (record, type) => {
    visible.value = true
    actionType.value = type
    actionData.value = record
  }
  const handleRefresh = () => {
    queryList()
  }
  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 编辑
   * @param record 发行商
   */
  const edit = (record) => {
    router.push({
      path: '/integral-issuer/manage/add',
      query: { coinId: record.coinId, id: record.id },
    })
  }

  /**
   * 详情
   * @param record 发行商
   */
  const detail = (record) => {
    router.push({
      path: '/integral-issuer/manage/detail',
      query: { coinId: record.coinId, id: record.id, type: 1 },
    })
  }

  /**
   * 添加
   * @param record 发行商
   */
  const add = () => {
    router.push({
      path: '/integral-issuer/manage/add',
    })
  }
</script>

<style lang="less" scoped></style>
